<template>
  <el-dialog v-model="visible" :title="`设备下发情况`" :close-on-click-modal="false" :close-on-press-escape="false"
    width="600">
    <el-table v-loading="dataListLoading" :data="deviceIssueList" row-key="id" border style="width: 100%">
      <el-table-column prop="deviceInfoId" :label="$t('device.deviceInfoId')"></el-table-column>
      <el-table-column prop="deviceName" :label="$t('device.deviceName')"></el-table-column>
      <el-table-column prop="status" :label="$t('deviceAuth.status')">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status === 1">成功</el-tag>
          <el-tag type="danger" v-else>失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="errorMessage" :label="$t('deviceAuth.errorMessage')"></el-table-column>
    </el-table>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataListLoading = ref(false);

const init = (id?: number) => {
  visible.value = true;

  if (id) {
    getInfo(id);
  }
};

// 获取信息
const deviceIssueList = ref<any[]>([]);
const getInfo = (id: number) => {
  dataListLoading.value = true;
  baseService.get("/leave/info/getDetail", { leaveInfoId: id }).then((res) => {
    deviceIssueList.value = res.data;
    dataListLoading.value = false;
  });
};

defineExpose({
  init
});
</script>
